<template>
  <el-container>
    <!-- 受理信息 -->
    <el-header>不动产抵押业务受理</el-header>
    <el-container>
      <el-aside width="200px" class="subtitle">受理信息</el-aside>
      <el-main>
        <el-form ref="slxxform" :model="slxxform" label-width="120px">
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="银行业务受理号">
                <el-input v-model="slxxform.ywslh" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="区县代码">
                <el-select
                  v-model="slxxform.qxdm"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请选择区县代码"
                  :remote-method="initQxdmDict"
                  :loading="loading">
                  <el-option
                    v-for="item in qxdmData"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="登记类型">
                <el-select
                  v-model="slxxform.djlx"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请选择登记类型"
                  :remote-method="initDjlxDict"
                  :loading="loading"
                >
                  <el-option
                    v-for="item in djlxData"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="受理人">
                <el-input v-model="slxxform.slr"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="咨询电话">
                <el-input v-model="slxxform.zxdh"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="受理时间">
                <el-col :span="12">
                  <el-date-picker
                    type="datetime"
                    placeholder="选择日期"
                    v-model="slxxform.slsj"
                    format="yyyy-MM-dd HH:MM:SS"
                    value-format="yyyy-MM-dd HH:mm">
                  </el-date-picker>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="短信联系人">
                <el-input v-model="slxxform.dxlxr"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="短信联系电话">
                <el-input v-model="slxxform.dxlxdh"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
    </el-container>

    <!-- 抵押权人模块 -->
    <el-divider></el-divider>
    <el-container>
      <el-aside width="200px" class="subtitle">抵押权人信息</el-aside>
      <el-main>
        <el-form
          ref="dyqrData"
          :model="dyqrData"
          size="medium"
          label-width="150px">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="抵押权人名称：">
                <el-input v-model="dyqrData.frmc"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="抵押权人电话：">
                <el-input v-model="dyqrData.frdh"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="抵押权人证件类型：">
                <el-select
                  v-model="dyqrData.frzjlx"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请选择证件类型"
                  :remote-method="initZjzlDict"
                  :loading="loading"
                >
                  <el-option
                    v-for="item in zjzlData"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="法人证件号：">
                <el-input v-model="dyqrData.frzjh"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="代理人名称：">
                <el-input v-model="dyqrData.dlrmc"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="代理人电话：">
                <el-input v-model="dyqrData.dlrdh"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="代理人证件类型：">
                <el-select
                  v-model="dyqrData.dlrzjzl"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请选择证件类型"
                  :remote-method="initZjzlDict"
                  :loading="loading"
                >
                  <el-option
                    v-for="item in zjzlData"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="代理人证件号：">
                <el-input v-model="dyqrData.dlrzjh"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="权利人类型：">
                <el-select
                  v-model="dyqrData.qlrlx"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请选择权利人类型"
                  :remote-method="initQlrlxDict"
                  :loading="loading"
                >
                  <el-option
                    v-for="item in zjzlData"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="权利人电话：">
                <el-input v-model="dyqrData.qlrdh"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="权利人证件类型：">
                <el-select
                  v-model="dyqrData.qlrzjlx"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请选择证件类型"
                  :remote-method="initZjzlDict"
                  :loading="loading"
                >
                  <el-option
                    v-for="item in zjzlData"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="权利人证件号：">
                <el-input v-model="dyqrData.zjh"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="10">
            <!-- <el-col :span="6">
                        <el-form-item label="抵押权人名称：">
                            <el-input v-model="dyqrData.qlrmc"></el-input>
                        </el-form-item>                         
                    </el-col> -->
            <el-col :span="12">
              <el-form-item label="通讯地址：">
                <el-input type="textarea" v-model="dyqrData.txdz"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="10">
            <el-form-item>
              <el-button type="primary" @click="addDyqrData('dyqrData')">新增</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-main>
    </el-container>

    <!-- 抵押人模块 -->
    <el-divider></el-divider>
    <el-container>
      <el-aside width="200px" class="subtitle">抵押人信息</el-aside>
      <el-main>
        <el-form
          ref="dyrform"
          :model="dyrform"
          size="medium"
          label-width="150px"
        >
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="不动产权证号：">
                <el-input v-model="dyrform.bdcqzh"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="代理人名称：">
                <el-input v-model="dyrform.dlrmc"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="代理人电话：">
                <el-input v-model="dyrform.dlrdh"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="代理人证件号码：">
                <el-input v-model="dyrform.dlrzjhm"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="权利人名称：">
                <el-input v-model="dyrform.qlrmc"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="证件种类：">
                <el-select
                  v-model="dyrform.zjlx"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请选择证件类型"
                  :remote-method="initZjzlDict"
                  :loading="loading"
                >
                  <el-option
                    v-for="item in zjzlData"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="证件号码：">
                <el-input v-model="dyrform.zjhm"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="性别：">
                <el-select
                  v-model="dyrform.xb"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请选择性别"
                  :remote-method="initXbDict"
                  :loading="loading"
                >
                  <el-option
                    v-for="item in xbData"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="单位性质：">
                <el-select
                  v-model="dyrform.dwxz"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请选择单位性质"
                  :remote-method="initXbDict"
                  :loading="loading"
                >
                  <el-option
                    v-for="item in qlrlxData"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="国籍：">
                <el-input v-model="dyrform.gj"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="共有情况：">
                <el-select
                  v-model="dyrform.gyfs"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请选择共有情况"
                  :remote-method="initGyfsDict"
                  :loading="loading"
                >
                  <el-option
                    v-for="item in gyfsData"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="权利比例：">
                <el-input v-model="dyrform.qlbl"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-form-item>
              <el-button type="primary" @click="addDyqrData('dyqrData')"
                >新增</el-button
              >
            </el-form-item>
          </el-row>
        </el-form>
      </el-main>
    </el-container>

    <!-- 操作版面  -->
    <el-divider></el-divider>
    <div>
      <!-- <kt-button icon="fa fa-plus" label="获取用户任务列表" perms="app:estate:view" type="primary" @click="queryDoingList()" /> -->
      <kt-button
        icon="fa fa-plus"
        label="提交业务"
        perms="app:estate:dyywsl:submit"
        type="primary"
        @click="submitBusiness()"
      />
      <kt-button
        icon="fa fa-plus"
        label="保存草稿"
        perms="app:estate:dyywsl:save"
        type="primary"
        @click="saveBusiness(slxxform)"
      />
    </div>
    <div>
      <!--选择处理人界面-->
      <el-dialog
        title="选择下一个流程与处理人"
        width="40%"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
      >
        <el-form
          :model="usersform"
          label-width="80px"
          ref="usersform"
          :size="size"
          label-position="right"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="usersform.username"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属网点" prop="netNo">
            <el-input v-model="usersform.netNo" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="机构" prop="deptName">
            <el-select
              v-model="value"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="findNextUser"
              :loading="loading"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button :size="size" @click.native="dialogVisible = false">{{
            $t("action.cancel")
          }}</el-button>
          <el-button
            :size="size"
            type="primary"
            @click.native="submitForm"
            :loading="editLoading"
            >{{ $t("action.submit") }}</el-button
          >
        </div>
      </el-dialog>
    </div>
  </el-container>
</template>

<script>
import KtButton from "@/views/Core/KtButton";
import PopupTreeInput from "@/components/PopupTreeInput";
export default {
  components: {
    PopupTreeInput,
    KtButton,
  },

  data() {
    return {
      size: "small",
      operation: false, // true:新增, false:编辑
      dialogVisible: false, // 新增编辑界面是否显示
      editLoading: false,
      loading: false,

      // 树状选择定义
      net: "",
      netData: [], // 网点信息
      user: "",
      userData: [], // 用户信息
      options: [],
      value: [],
      list: [],
      loading: false,

      /**
       * 区县代码
       * 登记类型
       * 权利人类型
       * 共有方式
       * 抵押不动产类型
       * 抵押方式
       * 性别
       * 证件种类
       */
      qxdmData: [],
      djlxData: [],
      qlrlxData: [],
      gyfsData: [],
      dybdclxData: [],
      dyfsData: [],
      xbData: [],
      zjzlData: [],

      /** 上传类型 */
      sclxOptions: [
        {
          value: "0",
          label: "原件正本",
        },
        {
          value: "1",
          label: "正本复印件",
        },
      ],

      labelWidth: {
        type: String,
        default: "180px",
      },

      slxxform: {
        ywslh: "",
        qxdm: "",
        djlx: "",
        slr: "",
        zxdh: "",
        slsj: "",
        dxlxr: "",
        dxlxdh: "",
      },

      /**
       * 抵押权人信息
       */
      dyqrData: {
        ywslh: "",
        frmc: "",
        frdh: "",
        frzjlx: "",
        frzjh: "",
        dlrdh: "",
        dlrzjzl: "",
        dlrmc: "",
        zjzl: "",
        zjh: "",
        qlrmc: "",
        qlrlx: "",
        qlrzjlx: "",
        dh: "",
        txdz: "",
      },

      /** 抵押人信息 */
      dyrform: {
        qlrmc: "权利人名称",
        zjlx: "身份证",
        zjhm: "证件号码",
        xb: "性别",
        dwxz: "单位性质",
        gj: "国籍",
        gyfs: "单独所有",
        qlbl: "权利比例",
        bdcqzh: "不动产权证号",
        dlrmc: "代理人名称",
        dlrdh: "代理人电话",
        dlrzjhm: "代理人证件号码",
      },

      /** 材料信息列表 */
      clxxobject: { sclx: "" },
      clxxform: {
        clxxList: [],
      },

      usersform: {
        netNo: "",
        idCard: "",
        username: "",
      },
    };
  },
  methods: {
    init() {
      this.slxxform.djlx = "首次登记";

      var date = new Date();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }

      this.slxxform.slsj =
        date.getFullYear() +
        "-" +
        month +
        "-" +
        strDate +
        " " +
        date.getHours() +
        ":" +
        date.getMinutes() +
        ":" +
        date.getSeconds();

      /**
       * 初始化业务受理号
       * 初始化区县代码
       * 初始化登记类型
       * 初始化共有方式
       * 初始化抵押方式
       * 初始化抵押不动产类型
       * 初始化性别
       * 初始化证件种类
       * 初始化权利人类型
       * 初始化抵押权人信息
       * 初始化受理人信息
       */
      this.initYwslh();
      this.initQxdmDict("qxdm");
      this.initDjlxDict("djlx");
      this.initGyfsDict("gyfs");
      this.initDyfsDict("dyfs");
      this.initDybdclxDict("dybdclx");
      this.initXbDict("xb");
      this.initZjzlDict("zjzl");
      this.initQlrlxDict("qlrlx");
      this.autofillDyqrxx();
      this.autofillSlrxx();
    },

    // /** 初始化上传附件列表 */
    // initClxxColumns: function (data) {
    // 	this.$api.clxxgl.findAll(data).then((res) => {
    //         res.data.forEach(element => {
    //             console.log(element)
    //             this.clxxobject = {sclx: ''}
    //             this.clxxobject.v = element.cllxmc
    //             this.clxxobject.k = element.id
    //             this.clxxform.clxxList.push(this.clxxobject)
    //         });
    // 	}).then(data!=null?data.callback:'')
    // },

    /** 初始化业务受理号 */
    initYwslh: function (data) {
      this.$api.dyywsl
        .createYwslh(data)
        .then((res) => {
          this.slxxform.ywslh = res.data;
        })
        .then(data != null ? data.callback : "");
    },

    /** 保存抵押权人信息 */
    saveDyqrxx: function (data) {
      this.$api.dyywsl
        .submitDyqrxx(data)
        .then((res) => {
          console.log(res);
        })
        .then(data != null ? data.callback : "");
    },

    /** 保存抵押人信息 */
    saveDyrxx: function (data) {
      this.$api.dyywsl
        .submitDyrxx(data)
        .then((res) => {
          console.log(res);
        })
        .then(data != null ? data.callback : "");
    },

    /** 保存业务受理信息，并发送到rabbitmq */
    saveBusiness: function (data) {
      this.$api.dyywsl
        .submitYwsl(data)
        .then((res) => {
          this.$message({
            type: "info",
            message: res.data,
          });
        })
        .then(data != null ? data.callback : "");
    },

    submitBusiness: function () {
      this.$alert("是否提交当前业务并启动抵押流程?", "提交业务", {
        confirmButtonText: "确定",
        callback: (action) => {
          // 绑定抵押权人，抵押人与对应的业务号
          this.dyqrData.ywslh = this.slxxform.ywslh;
          this.dyrform.ywslh = this.slxxform.ywslh;

          this.saveBusiness(this.slxxform);
          this.saveDyqrxx(this.dyqrData);
          this.saveDyrxx(this.dyrform);

          // this.$api.dyywsl.submitYwsl(data).then((res) => {
          //     if (res.data == 1) {
          //         this.$message({
          //             type: 'info',
          //             message: '提交业务成功'
          //         });
          //     } else {
          //         this.$message({
          //             type: 'error',
          //             message: '提交业务失败'
          //         });
          //     }
          // }).then(data!=null?data.callback:'')
        },
      });
    },

    /** 获取提交到下一个流程的网点信息 */
    remoteMethod(query) {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.options = this.list.filter((item) => {
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });
      }, 200);
    },

    /**
     * 获取已办业务
     */
    queryDoingList: function (data) {
      this.$api.dyywsl
        .queryDoingList(data)
        .then((res) => {
          console.log(res);
        })
        .then(data != null ? data.callback : "");
    },

    findNextUser() {
      this.loading = true;
      this.$api.user.findUserByRoleAndNetNo().then((res) => {
        this.netData = res.data;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter((item) => {
            return item;
          });
        }, 200);
      });
    },

    /**
     * 通过业务类型查找字典数据
     */
    initDjlxDict: function (data) {
      this.$api.dict
        .findByType(data)
        .then((res) => {
          this.djlxData = res.data;
        })
        .then(data != null ? data.callback : "");
    },

    initQxdmDict: function (data) {
      this.loading = true;
      this.$api.dict.findByType(data).then((res) => {
        this.qxdmData = res.data;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter((item) => {
            return item;
          });
        }, 200);
      });
    },

    initGyfsDict: function (data) {
      this.loading = true;
      this.$api.dict.findByType(data).then((res) => {
        this.gyfsData = res.data;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter((item) => {
            return item;
          });
        }, 200);
      });
    },

    initDyfsDict: function (data) {
      this.loading = true;
      this.$api.dict.findByType(data).then((res) => {
        this.dyfsData = res.data;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter((item) => {
            return item;
          });
        }, 200);
      });
    },

    initDybdclxDict: function (data) {
      this.loading = true;
      this.$api.dict.findByType(data).then((res) => {
        this.dybdclxData = res.data;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter((item) => {
            return item;
          });
        }, 200);
      });
    },

    initXbDict: function (data) {
      this.loading = true;
      this.$api.dict.findByType(data).then((res) => {
        this.xbData = res.data;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter((item) => {
            return item;
          });
        }, 200);
      });
    },

    initZjzlDict: function (data) {
      this.loading = true;
      this.$api.dict.findByType(data).then((res) => {
        this.zjzlData = res.data;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter((item) => {
            return item;
          });
        }, 200);
      });
    },

    initQlrlxDict: function (data) {
      this.loading = true;
      this.$api.dict.findByType(data).then((res) => {
        this.qlrlxData = res.data;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter((item) => {
            return item;
          });
        }, 200);
      });
    },

    /**
     * 填充抵押权人信息
     */
    autofillDyqrxx: function (data) {
      this.$api.dyywsl.autofillDyqrxx(data).then((res) => {
        this.dyqrData.frmc = res.data.dyqrqc;
        this.dyqrData.frdh = res.data.lxdh;
        this.dyqrData.frzjlx = "营业执照";
        this.dyqrData.frzjh = res.data.yyzz;
        this.dyqrData.dlrdh = res.data.zghzdh;
        this.dyqrData.dlrzjzl = "身份证";
        this.dyqrData.dlrzjh = "";
        this.dyqrData.dlrmc = res.data.zghzxm;
        this.dyqrData.qlrzjlx = "身份证";
        this.dyqrData.zjh = res.data.zghzsfzh;
        this.dyqrData.qlrmc = "";
        this.dyqrData.qlrlx = "";
        this.dyqrData.dh = "";
        this.dyqrData.txdz = res.data.txdz;
      });
    },

    /**
     * 填充受理人信息
     */
    autofillSlrxx: function (data) {
      this.$api.dyywsl.autofillSlrxx(data).then((res) => {
        this.slxxform.slr = res.data.name;
        this.slxxform.zxdh = res.data.mobile;
        this.slxxform.dxlxr = res.data.name;
        this.slxxform.dxlxdh = res.data.mobile;
      });
    },
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.init();
  },

  beforeDestroy() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang='scss' scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: left;
  line-height: 160px;
}

.el-main >>> .el-input {
  width: 200px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.clxxTitle {
  padding: 5px 0;
  border-bottom: 1px solid #f2f2f2;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
}
</style>